<template>
  <div class="nav-header">
    <div class="fold">
      <img   @click="handleIsFold"  style="height:24px;width:24px;margin-left:10px;margin-right:10px" src="@/assets/css/yingxiao/矩形 4 拷贝 2.png" alt="">
      <!-- <i class="el-icon-back"  @click="handleIsFold" v-if="!isFold"></i>
      <i class="el-icon-right" @click="handleIsFold" v-else></i> -->
    </div>
    <div class="block">
         <el-row>
           <el-col>
               <el-input
               style="width:370px;height:34px"
                 placeholder="请输入内容"
                 prefix-icon="el-icon-search"
                 v-model="input">
               </el-input>
               <span style="margin-left:49px;color:#8D8D8D">剩余短信:&nbsp;&nbsp;</span> <span style="color:#494949" >66666</span>
               <el-button style="margin-left:5px" class="addbtn">充值</el-button>
           </el-col>
         </el-row>
    </div>
    <div class="user-info">
      <user-info/>
    </div>
  </div>
</template>

<script>
import userInfo from './user-info.vue'
export default {
  components: { userInfo },
  data() {
    return {
      isFold: false,
      input:''

    }
  },
  methods: {
    handleIsFold() {
      console.log(22);
      this.isFold = !this.isFold;
      this.$emit('handleIsFold', this.isFold)
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-input__inner {
  background-color: #F5F5F5!important;

} 
.nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .fold {
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
  }
  .block {
    flex: 1;
    height: 60px;
  }
  .user-info {
    width: 120px;
  }
}
</style>